<template>
	<view class="wetdg" >
		<view class="content">
			<input class="weui-input" auto-focus placeholder="搜索" @click="search"/>
		</view>
		<view  class='er'>
			<scroll-view class="left" scroll-y :style="{height:height}">
				<van-sidebar :active-key=" activeKey ">
				  <van-sidebar-item @click="qie(key)" :title="item.cat_name" v-for="(item,key) in title" :key="key"/>
				</van-sidebar>
			</scroll-view>
			<scroll-view class="right" scroll-y :style="{height:height}">
				<view v-for="(item,key) in title[activeKey].children" :key="key">
					<p>{{item.cat_name}}</p>
					<section>
						<van-grid column-num="3" :border="false ">
						  <van-grid-item use-slot v-for="(item1,key1) in item.children" :key="key1" @click="tiao(item1.cat_id)">
						    <image
						      style="width: 100%; height: 90px;"
						      :src="item1.cat_icon"
						    />
							<p>{{item1.cat_name}}</p>
						  </van-grid-item>
						</van-grid>
					</section>
				</view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import http from "../../http/http.js"
	export default {
		data() {
			return {
				height:0,
				title:[],
				activeKey: 0,
			}
		},
		methods: {
			async lunobo(){
				let {data:res} = await http.get('https://api-hmugo-web.itheima.net/api/public/v1/categories')
				// console.log(res);
				this.title=res.message
			},
			qie(k){
				console.log(k);
				this.activeKey=k
			},
			tiao(cid){
				wx.navigateTo({url:'/pages/goods/goods?cid='+cid})
			},
			search(){
				wx.navigateTo({url:"/pages/sou/sou"})
			}
		},
		onLoad() {
			var obj=wx.getSystemInfoSync()
			this.height=obj.windowHeight+'px'
			
			this.lunobo()
		}
	}
</script>

<style lang="scss">
	.wetdg{
		display: flex;
		flex-direction: column;
	}
.content{
	width: 100%;
	height: 100rpx;
	background-color:#2049cc;
	display: flex;
	justify-content: center;
}
.weui-input{
	width: 85%;
	height: 70rpx;
	padding-left: 50rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
}
.er{
	display: flex;
	// flex-direction: column;
	.left{
		width: 25%;
		height: 100%;
		// background-color: aqua;
	}
	.right{
		flex: 1;
	}
}
</style>
